<template>
  <div class="app-container">
    <!-- <el-tag>查询条件</el-tag> -->
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item label="办理渠道">
          <template slot-scope="scope">
            <el-select v-model="form.plat_id" clearable>
              <el-option v-for="item in platTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="退款状态">
          <template slot-scope="scope">
            <el-select v-model="form.refund_status" clearable>
              <el-option v-for="item in refundStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="form.create_date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"  clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="付款时间">
          <el-date-picker v-model="form.pay_date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"  clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="退款时间">
          <el-date-picker v-model="form.refund_date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重 置</el-button>
        <el-button class="btn" @click="search" type="primary">查 询</el-button>
        <el-button class="btn" @click="exportForm" type="primary">导 出</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" fixed label="序号" min-width="50">
        </el-table-column>
        <el-table-column prop="order_id" fixed label="商户订单号" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_date" fixed label="下单时间" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="pay_date" fixed label="付款时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="order_amount" fixed label="金额" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_name" label="客户姓名" min-width="100">
        </el-table-column>
        <el-table-column prop="plate_no" label="车牌号" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="receiver" label="收货人" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="maketime" label="制卡时间" min-width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="refund_date" label="退款时间" min-width="120" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="block">
        <span v-show="isShow" style="font-size: 0.75rem; color: red">报表生成时间：{{sysdate}}</span>
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, exportList } from '@/api/financialReconciliationReport'
  import { queryDict } from '@/api/queryDict'
  export default {
    data() {
      return {
        platTypeList: [],
        refundStatusList: [],
        isShow: false,
        sysdate: '',
        listLoading: '',
        currentPage: 1,
        downloadUrl: '',
        baseList: [],
        perPageNum: 10,
        totalListNum: 0,
        form: {
          plat_id: '',
          refund_status: ''
        }
      }
    },
    created() {
      this.queryPlatType()
      this.queryRefundStatus()
      this.fetchData()
    },
    methods: {
      queryPlatType() {
        const params = {
          'group_id': 'PLAT_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.platTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryRefundStatus() {
        const params = {
          'group_id': 'REFUND_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.refundStatusList = res.data ? res.data : []
        }).catch(er => { })
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        this.fetchData()
      },
      completionZero(da) {
        return da.toString().length === 2 ? da : da.toString().length === 1 ? '0' + da : '00'
      },
      search() {
        this.currentPage = 1
        const date = new Date()
        this.sysdate = date.getFullYear() + '-' + this.completionZero(date.getMonth() + 1) + '-' + this.completionZero(date.getDate()) + ' ' + this.completionZero(date.getHours()) + ':' + this.completionZero(date.getMinutes()) + ':' + this.completionZero(date.getSeconds())
        this.isShow = true
        this.fetchData()
      },
      exportForm() {
        const params = {
          'plat_id': this.form.plat_id,
          'refund_status': this.form.refund_status,
          'create_date_start': this.form.create_date === undefined ? '':this.form.create_date === null ? '':this.form.create_date[0] === '' ? '' : this.praseDate((this.form.create_date)[0]),
          'create_date_end': this.form.create_date === undefined ? '':this.form.create_date === null ? '':this.form.create_date[1] === '' ? '' : this.praseDate((this.form.create_date)[1]),
          'pay_date_start': this.form.pay_date === undefined ? '':this.form.pay_date === null ? '':this.form.pay_date[0] === '' ? '' : this.praseDate((this.form.pay_date)[0]),
          'pay_date_end': this.form.pay_date === undefined ? '':this.form.pay_date === null ? '':this.form.pay_date[1] === '' ? '' : this.praseDate((this.form.pay_date)[1]),
          'refund_date_start': this.form.refund_date === undefined ? '':this.form.refund_date === null ? '':this.form.refund_date[0] === '' ? '' : this.praseDate((this.form.refund_date)[0]),
          'refund_date_end': this.form.refund_date === undefined ? '':this.form.refund_date === null ? '':this.form.refund_date[1] === '' ? '' : this.praseDate((this.form.refund_date)[1])
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        exportList(params).then(res => {
          const data = res.data
          if(data === null){
            this.$message.error(res.message)
          } else {
            this.downloadUrl = data.download_url
            window.location.href = this.downloadUrl
          }
        }).catch(er => {
          this.$message.error('导出失败，请重试！')
        })
        loading.close()
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      praseDate(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return year + '-' + month + '-' + day
      },
      fetchData() {
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'plat_id': this.form.plat_id,
          'refund_status': this.form.refund_status,
          'create_date_start': this.form.create_date === undefined ? '':this.form.create_date === null ? '':this.form.create_date[0] === '' ? '' : this.praseDate((this.form.create_date)[0]),
          'create_date_end': this.form.create_date === undefined ? '':this.form.create_date === null ? '':this.form.create_date[1] === '' ? '' : this.praseDate((this.form.create_date)[1]),
          'pay_date_start': this.form.pay_date === undefined ? '':this.form.pay_date === null ? '':this.form.pay_date[0] === '' ? '' : this.praseDate((this.form.pay_date)[0]),
          'pay_date_end': this.form.pay_date === undefined ? '':this.form.pay_date === null ? '':this.form.pay_date[1] === '' ? '' : this.praseDate((this.form.pay_date)[1]),
          'refund_date_start': this.form.refund_date === undefined ? '':this.form.refund_date === null ? '':this.form.refund_date[0] === '' ? '' : this.praseDate((this.form.refund_date)[0]),
          'refund_date_end': this.form.refund_date === undefined ? '':this.form.refund_date === null ? '':this.form.refund_date[1] === '' ? '' : this.praseDate((this.form.refund_date)[1])
        }
        console.log(params)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : null
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .page-num {
    float: right;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .ml20 {
    margin-left: 1.25rem;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .w100 {
    display: block;
    width: 6.2rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }

</style>
